import React,{useRef} from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { PrimaryButton } from 'office-ui-fabric-react';

import './style.scss';

export default function CKEditExample1() {

    // window.WEBSPELLCHECKER_CONFIG = {
    //     autoSearch: true,
    //     enableGrammar: true,
    //     serviceId: 'pxrhO9W3FeKtD9U'
    // };

    const ckeditorRef = useRef(null)

    const _handleClickSetData = ()=>{
        const editor = ckeditorRef.current.editor
        editor.setData( '<p>Some text.</p>' );
    }
    

    const _handleClickGetData = ()=>{
        const editor = ckeditorRef.current.editor
        const editorData = editor.getData()
        console.log('ckeditor',editor)
        console.log('editorData',editorData)
    }

    return (
        <>
            <div className="ckeditor-box">
                <h2>Using CKEditor 5 build in React</h2>
                <div className='ckeditor-box'>
                    <CKEditor
                        ref={ckeditorRef}
                        editor={ ClassicEditor }
                        data="<p>Typos hapen. We striving to correct them.</p>"
                        onInit={ editor => {
                            // You can store the "editor" and use when it is needed.
                            console.log( 'Editor is ready to use!', editor );
                        } }
                        onChange={ ( event, editor ) => {
                            const data = editor.getData();
                            console.log( { event, editor, data } );
                        } }
                        onBlur={ ( event, editor ) => {
                            console.log( 'Blur.', editor );
                        } }
                        onFocus={ ( event, editor ) => {
                            console.log( 'Focus.', editor );
                            // TODO: 此处可以通过请求 CKEditor 生态系统的后台校验服务 WProofreader （需要以公司名义 或 OSI开源项目才可申请到试用权ID，或直接购买）
                            // TODO: 来实现编辑器得到焦点后，异步校验文本中的语法问题，并进行相应的前端设置，来标出问题文字或内容来提示用户
                        } }
                    />
                </div>
            </div>
            <h1>与编辑器互动</h1>
            <PrimaryButton text="设置-编辑器数据" onClick={_handleClickSetData} className='btn'/>
            <PrimaryButton text="获取-编辑器数据" onClick={_handleClickGetData} className='btn'/>
        </>
    )
}